<div id="wechatmenu_container">
	<div class="row">
		<div class="col-xs-12">
			<div id="search_box" class="widget-box  ui-sortable-handle collapsed">

				<div class="widget-body" style="display: none;">
					<div class="widget-main">
						<div class="row">
							<div style="padding-left: 10px">
								<div class="col-xs-12 col-sm-2 " style="float: right">
									<div id="wechatmenuSearchDiv" class="input-group"
										style="padding-bottom: 2px">

										<span class="input-group-btn">
											<button id="wechatmenuSearchBtn" type="button"
												class="btn btn-purple btn-sm">
												<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
												<span i18n="find"></span>
											</button>
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>


			<table id="wechatmenu_grid-table" class="e-tree-grid"></table>

			<div id="wechatmenu_grid-pager"></div>

		</div>
		<!-- /.col -->
	</div>
	<!-- /.row -->


	<div id="wechatmenuModalDiv" class="modal fade" tabindex="-1"
		data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header no-padding">
					<div class="table-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">
							<span class="white">&times;</span>
						</button>
						<span i18n="wechat.menu"></span>
					</div>
				</div>
				<div class="modal-body"
					style="max-height: 450px; overflow-y: scroll;">
					<div id="modal-tip" class="red clearfix"></div>
					<div>
						<div class="widget-body">
							<form id="wechatmenuForm" name="wechatmenuForm"
								class="form-horizontal  col-xs-12">
								<input type="hidden" name="id" id="id" /> <input type="hidden"
									name="parentId" id="parentId" />
								<div class="row" style="padding-bottom: 2px">
									<div class="form-group">
										<label class="col-sm-3 control-label" i18n="wechat.menu.name"></label>
										<div class="col-sm-9">
											<input type="text" class="form-control" id="name" name="name" />
										</div>
									</div>
								</div>
								<div class="row" style="padding-bottom: 2px">
									<div class="form-group">
										<label class="col-sm-3 control-label" i18n="wechat.menu.url"></label>
										<div class="col-sm-9">
											<textarea rows="8" cols="50" type="text" class="form-control"
												id="url" name="url" />

										</div>
									</div>
								</div>
								<div class="row" style="padding-bottom: 2px">
									<div class="form-group">
										<label class="col-sm-3 control-label"
											i18n="wechat.menu.lableKey"></label>
										<div class="col-sm-9">
											<input type="text" class="form-control" id="lableKey"
												name="lableKey" />
										</div>
									</div>
								</div>
								<div class="row" style="padding-bottom: 2px">
									<div class="form-group">
										<label class="col-sm-3 control-label"
											i18n="wechat.menu.sortNum"></label>
										<div class="col-sm-9">
											<input type="text" class="form-control spinner" id="sortNum"
												name="sortNum" />
										</div>
									</div>
								</div>

								<div class="row" style="padding-bottom: 2px">
									<div class="form-group">
										<label class="col-sm-3 control-label" i18n="wechat.menu.type"></label>
										<div class="col-sm-9">
											<select class="form-control" id="type" name="type" />
										</div>
									</div>
								</div>
							</form>

						</div>
					</div>
				</div>
				<div class="modal-footer no-margin-top">
					<div class="text-center">

						<button id="submitwechatmenuBtn" class="btn btn-sm btn-primary">
							<i class="ace-icon fa fa-floppy-o"></i> <span i18n="save"></span>
						</button>

						<button class="btn btn-sm" data-dismiss="modal">
							<i class="ace-icon fa fa-share "></i> <span i18n="cancel"></span>
						</button>
					</div>
				</div>
			</div>
			<!-- /.modal-content -->

		</div>
		<!-- /.modal-dialog -->
	</div>

</div>


<script type="text/javascript">
    var scripts = [ null, null ];
    var $container = $('#wechatmenu_container');
    var wechatmenuGrid = null;
    var $validatewechatmenuForm = null;
    $('.page-content-area')
	    .ace_ajax(
		    'loadScripts',
		    scripts,
		    function() {
			var grid_selector = "#wechatmenu_grid-table";
			var pager_selector = "#wechatmenu_grid-pager";

			var colNames;

			$.loy.dicts('', 'menuType', '', function() {
			    var list = $.loy.dictList('menuType');
			    var temp = [];
			    if (list) {

				$('#type', $container).html('');
				temp.push('<option value=""></option>');
				for (var i = 0; i < list.length; i++) {
				    var k = list[i].id;
				    var l = list[i].name;
				    temp.push('<option value="'+k+'">' + l + '</option>');
				}
			    }
			    $('#type', $container).html(temp.join(' '));

			});

			$('.spinner', $container).ace_spinner({
			    value : 0,
			    min : 0,
			    max : 1000000,
			    step : 1,
			    on_sides : true,
			    icon_up : 'ace-icon fa fa-plus smaller-75',
			    icon_down : 'ace-icon fa fa-minus smaller-75',
			    btn_up_class : 'btn-success',
			    btn_down_class : 'btn-danger'
			});

			$.loy.i18n([ 'i18n/wechat/wechat_menu' ], $.homeGlobal.LANG, $container, {
			    custCallback : function() {
				$('input, textarea', $container).placeholder();
				colNames = [ '', $.i18n.prop("wechat.menu.name"), $.i18n.prop("wechat.menu.url"), $.i18n.prop("wechat.menu.type"), $.i18n.prop("wechat.menu.lableKey"), $.i18n.prop("wechat.menu.sortNum"), '' ];
				$('#search_box', $container).on('shown.ace.widget', function(e) {
				    $('.chosen-container', $('#search_box', $container)).each(function() {
					var $this = $(this);
					$this.css({
					    'width' : $this.parent().width()
					});
				    });
				    var searchConditionHeight = $('.widget-body', $('#search_box', $container)).height();
				    wechatmenuGrid.setGridHeight(getGridDefaultHeight() - searchConditionHeight);
				});
				$('#search_box', $container).on('hide.ace.widget', function(e) {
				    var searchConditionHeight = $('.widget-body', $('#search_box', $container)).height();
				    wechatmenuGrid.setGridHeight(getGridDefaultHeight());
				});
				createwechatmenuGrid();
			    }
			});

			$validatewechatmenuForm = $('#wechatmenuForm', $container).validate({
			    onsubmit : false,
			    rules : {
				name : {
				    required : true
				}
			    }
			});

			$('#submitwechatmenuBtn').click(function() {
			    if (!$validatewechatmenuForm.checkForm()) {
				$validatewechatmenuForm.defaultShowErrors();
				return;
			    }
			    var url = $(this).attr("url");
			    $.loy.ajax({
				url : url,
				data : $("#wechatmenuForm", $container).serialize(),
				success : function(data) {
				    var id = $('#id', $("#wechatmenuForm", $container)).val();
				    if (data.success) {
					$('#wechatmenuModalDiv', $container).modal("hide");
					if (id && id != "") {
					    var rowData = wechatmenuGrid.jqGrid('getRowData', id);
					    rowData.id = id;
					    rowData.name = $('#name', $container).val();
					    rowData.url = $('#url', $container).val();
					    rowData.type = $('#type', $container).val();
					    rowData.lableKey = $('#lableKey', $container).val();
					    rowData.sortNum = $('#sortNum', $container).val();
					    wechatmenuGrid.jqGrid('setRowData', id, rowData);
					} else {//新增
					    var parentId = $('#parentId', $container).val();
					    var parentRowData = wechatmenuGrid.jqGrid('getRowData', parentId);
					    var result = data.data;
					    var rowData = {};
					    rowData.url = result.url;
					    rowData.accessCode = result.accessCode;
					    rowData.lableKey = result.lableKey;
					    rowData.type = result.type;
					    rowData.name = result.name;
					    rowData.sortNum = result.sortNum;
					    rowData.parentId = parentId;
					    rowData.parent = parentId;
					    rowData.level = parentRowData.level + 1;
					    rowData.isLeaf = true;
					    rowData.expanded = false;
					    rowData.id = result.id;
					    wechatmenuGrid.jqGrid("addChildNode", result.id, parentId, rowData, rowData);
					}
				    }
				}
			    });
			});
			function createwechatmenuGrid() {
			    wechatmenuGrid = jQuery(grid_selector)
				    .loyGrid(
					    {
						url : 'wechat/menu/page',
						datatype : "json",
						mtype : 'GET',
						colNames : colNames,
						colModel : [
							{
							    name : 'parentId',
							    index : 'parentId',
							    sortable : false,
							    width : 100,
							    align : "left",
							    editable : true,
							    hidden : true
							},
							{
							    name : 'name',
							    index : 'name',
							    sortable : false,
							    width : 90,
							    align : "left",
							    editable : true
							},
							{
							    name : 'url',
							    index : 'url',
							    sortable : false,
							    width : 140,
							    align : "left",
							    editable : true
							},
							{
							    name : 'type',
							    index : 'type',
							    sortable : false,
							    width : 60,
							    align : "left",
							    editable : true
							},
							{
							    name : 'lableKey',
							    index : 'lableKey',
							    sortable : false,
							    width : 100,
							    align : "left",
							    editable : true
							},
							{
							    name : 'sortNum',
							    index : 'sortNum',
							    sortable : false,
							    width : 40,
							    align : "left",
							    editable : true
							},
							{
							    name : '',
							    index : '',
							    width : 120,
							    fixed : true,
							    sortable : false,
							    resize : false,
							    formatter : function(cellvalue, options, rowObject) {
								var button = '';

								button = '<div title="'
									+ $.jgrid.nav.edittitle
									+ '" onclick=wechatmenuEdit("'
									+ rowObject.id
									+ '");  style="float:left;margin-left:5px;" class="ui-pg-div ui-inline-del"  onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\');"  data-original-title="所选记录"><span class="ui-icon ui-icon-pencil"></span></div>';

								var del = '<div title="'
									+ $.jgrid.nav.deltitle
									+ '" onclick=wechatmenuDel("'
									+ rowObject.id
									+ '");  style="float:left;margin-left:5px;" class="ui-pg-div ui-inline-del"  onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\');"  data-original-title="所选记录"><span class="ui-icon ace-icon ace-icon fa fa-trash-o red"></span></div>';
								button = button + del;

								var add = '<div title="'
									+ $.jgrid.nav.addtitle
									+ '" onclick=wechatmenuAdd("'
									+ rowObject.id
									+ '");   style="float:left;margin-left:5px;" class="ui-pg-div ui-inline-del"  onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\');"  data-original-title="所选记录"><span class="ui-icon ace-icon fa fa-plus-circle purple"></span></div>';
								button = button + add;

								return button;
							    }
							} ],
						page : true,
						pager : pager_selector,
						treeGrid : true,

						gridview : true,
						ExpandColumn : "name",
						rownumbers : false,
						ExpandColClick : true,
						treeGridModel : "adjacency",
						width : $(".page-content").width(),
						height: getGridDefaultHeight(),
						loadComplete : function(data) {
						    loadComplete(data);
						}
					    }).loyGrid('navGrid', '#wechatmenu_grid-pager', {
					"baseUrl" : "wechat/menu/",
					removeCols : [ 0, 7, 8, 9, 10, 11, 12, 13 ],
					accessCodePrefix : 'wechatmenu',
					"addfunc" : function() {
					    wechatmenuAdd('');
					},
					view : false,
					add : true,
					edit : false,
					del : false,

				    }).loyGrid('navButtonAdd', "#wechatmenu_grid-pager", {
					caption : "",
					title : "同步到微信",
					buttonicon : "ace-icon fa fa-history red",
					onClickButton : function() {
					    syncWeChat();
					},
					position : "last"
				    });

			    wechatmenuGrid.jqGrid('setFrozenColumns');
			}

		    });

    function syncWeChat() {
	$.loy.ajax({
	    url : 'wechat/menu/create',
	    shade : false,
	    success : function(data) {

	    }
	});

    }

    function clearwechatmenuForm() {
	$validatewechatmenuForm.resetForm();
	$('#id', $container).val('');
	$('#name', $container).val('');
	$('#url', $container).val('');
	$('#type', $container).val('');
	$('#lableKey', $container).val('');
	$('#sortNum', $container).val('');
	$('#parentId', $container).val('');
    }

    function wechatmenuEdit(id) {
	clearwechatmenuForm();
	$('#submitwechatmenuBtn', $container).attr("url", "wechat/menu/update");
	$('#wechatmenuModalDiv', $container).modal("show");
	$.loy.ajax({
	    url : 'wechat/menu/get',
	    shade : false,
	    data : {
		id : id
	    },
	    success : function(data) {
		var result = data.data;
		$('#id', $container).val(result.id ? result.id : '');
		$('#name', $container).val(result.name ? result.name : '');
		$('#url', $container).val(result.url ? result.url : '');
		$('#type', $container).val(result.type);
		$('#lableKey', $container).val(result.lableKey ? result.lableKey : '');
		$('#sortNum', $container).val(result.sortNum ? result.sortNum : '');
		$('#parentId', $container).val(result.parentId ? result.parentId : '');
	    }
	});
    }
    function wechatmenuAdd(parentId) {
	clearwechatmenuForm();
	$('#parentId', $container).val(parentId);
	$('#submitwechatmenuBtn', $container).attr("url", "wechat/menu/save");
	$('#wechatmenuModalDiv', $container).modal("show");
    }
    function wechatmenuDel(id) {

	$.loy.confirm($.i18n.prop('confirm_info_del'), function() {
	    $.loy.ajax({
		url : 'wechat/menu/del',
		data : {
		    id : id
		},
		success : function(data) {
		    wechatmenuGrid.jqGrid("delTreeNode", id);
		}
	    });
	});
    }
</script>